/*
 * @Description: 指导内容弹窗
 * @Author: Zzt
 * @Date: 2022-12-22 14:16:52
 * @LastEditTime: 2023-02-01 09:25:39
 */
import { Button, Descriptions, Input, Modal, Space, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { byteConvert } from '@/utils';

// const dataSource = [{ id: 1, size: 40 }];
function Guidance(props: any) {
  const { visible, onClose, enclosure } = props;
  const columns: ColumnsType = [
    {
      title: '序号',
      dataIndex: 'fileNo',
      align: 'center',
      key: 'fileNo'
    },
    {
      title: '附件名称',
      dataIndex: 'fileName',
      align: 'center',
      key: 'fileName'
    },
    {
      title: '格式',
      dataIndex: 'fileExt',
      align: 'center',
      key: 'fileExt'
    },
    {
      title: '附件大小',
      dataIndex: 'fileSize',
      align: 'center',
      key: 'fileSize',
      render: (size: number) => byteConvert(size)
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (_, record: any) => (
        <Space size="small">
          <Button type="link" href={record.fileUrl} target={'_blank'} download={true}>
            下载
          </Button>
          <Button type="link" href={record.fileUrl} target={'_blank'}>
            浏览
          </Button>
        </Space>
      )
    }
  ];

  const onCancel = () => {
    onClose();
  };

  return (
    <Modal
      title="业务指导"
      visible={visible}
      width={900}
      destroyOnClose
      onCancel={onCancel}
      footer={null}
    >
      <div>
        <Descriptions labelStyle={{ fontWeight: 'bold' }}>
          <Descriptions.Item label="指导单位" span={3}>
            {enclosure?.guidanceUnitName}
          </Descriptions.Item>
          <Descriptions.Item label="指导员">{enclosure?.operatorName}</Descriptions.Item>
          <Descriptions.Item label="接收时间" span={2}>
            {enclosure?.readTime}
          </Descriptions.Item>
        </Descriptions>
        <Descriptions labelStyle={{ fontWeight: 'bold' }} layout="vertical">
          <Descriptions.Item label="综合指导意见" span={3}>
            <Input.TextArea disabled value={enclosure?.remark}></Input.TextArea>
          </Descriptions.Item>
          <Descriptions.Item label="附件" span={3}>
            <Table
              columns={columns}
              dataSource={enclosure?.attachmentJsonDTOS}
              style={{ width: '100%' }}
              bordered={true}
              size={'small'}
            ></Table>
          </Descriptions.Item>
        </Descriptions>
      </div>
    </Modal>
  );
}
export default Guidance;
